<template>
  <div style="width: 1200px;margin: 0 auto">
    <el-row :gutter="10">
      <el-col :span="6" v-for="item in contentArr">
        <router-link :to="'/detail?id='+item.id" style="color: #333;text-decoration: none">
        <el-card>
          <img :src="'http://localhost:8080'+item.imgUrl" style="width: 100%;height: 150px">
          <p style="height: 40px">{{ item.title }}</p>
          <el-row :gutter="10">
            <el-col :span="4"><el-avatar :src="'http://localhost:8080'+item.userImgUrl"></el-avatar></el-col>
            <el-col :span="10" style="font-size: 20px;line-height: 40px">{{ item.nickname }}</el-col>
            <el-col :span="10" style="line-height: 40px">{{ item.categoryName }}</el-col>
          </el-row>
        </el-card>
        </router-link>
      </el-col>
    </el-row>
  </div>
</template>

<script setup>
import {onBeforeUpdate, onMounted, ref} from "vue";
import axios from "axios";

const contentArr = ref([]);
const loadContents=()=>{
  //判断地址栏中是否包含wd,如果包含代表需要搜索内容
  if (location.search.includes('wd')){
    let wd = new URLSearchParams(location.search).get('wd');
    //发请求获取搜索的内容
    axios.get('http://localhost:8080/v1/contents/search?wd='+wd).then((response)=>{
      if (response.data.code==2001){
        contentArr.value = response.data.data;
      }
    })
  }else {
    let type = new URLSearchParams(location.search).get('type');
    console.log(type);
    axios.get('http://localhost:8080/v1/contents/'+type+'/list').then((response)=>{
      if (response.data.code==2001){
        contentArr.value = response.data.data;
      }
    })
  }
}
onMounted(()=>{
  loadContents();
})
onBeforeUpdate(()=>{
  loadContents();
})
</script>

<style scoped>

</style>